<template>
  <div class="container">
    <el-descriptions column="6" class="links" title="生产详情页">
    </el-descriptions>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="生产详情" name="first">
        <el-descriptions column="2" class="basic-info">
          <el-descriptions-item label="生产单号：" class="label">{{
            ProduceList.ProCode
          }}</el-descriptions-item>
          <el-descriptions-item label="单据日期：" class="label">{{
            ProduceList.ProDate
          }}</el-descriptions-item>
          <el-descriptions-item label="负责人：" class="label">{{
            ProduceList.ProPeo
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话：" class="label">{{
            ProduceList.ProPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="生产日期" class="label">{{
            ProduceList.ProDateInfo
          }}</el-descriptions-item>
          <el-descriptions-item label="生产人员：" class="label">{{
            ProduceList.ProPeople
          }}</el-descriptions-item>
          <el-descriptions-item label="备注：" class="label">
            {{ ProduceList.ProDesc }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="领料记录" name="second">
        <el-table
          ref="multipleTableRef"
          :data="outWareHouseList"
          style="width: 100%"
        >
          <el-table-column label="序号" width="70" align="left">
            <template #default="scope">
              {{ scope.$index + (pageIndex - 1) * pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column property="OutType" label="出库类型" width="120" />
          <el-table-column property="OutNum" label="出库单号" width="120" />
          <el-table-column property="OutTopic" label="出库主题" width="120" />
          <el-table-column property="OutDate" label="出库日期" width="120" />
          <el-table-column
            property="OutWareHouse"
            label="出库仓库"
            width="120"
          />
          <el-table-column property="Applicant" label="申领人员" width="120" />
          <el-table-column property="OutName" label="出库人员" width="120" />
          <el-table-column property="OutCount" label="出库数量" width="120" />
          <el-table-column property="MatPrice" label="单价" width="120" />
          <el-table-column label="总金额" width="120">
            <template #default="{ row }">
              <span>{{ row.OutCount * row.MatPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column property="Remark" label="备注" width="120" />
        </el-table>
        <el-pagination
          v-model:current-page="pageIndex"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="退料记录" name="sss">
        <el-table
          ref="multipleTableRef"
          :data="stockInList"
          style="width: 100%"
        >
          <el-table-column label="序号" width="70" align="left">
            <template #default="scope">
              {{ scope.$index + (pageIndex - 1) * pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="StockInType" label="入库类型" align="center">
          </el-table-column>
          <el-table-column
            prop="StockInCode"
            label="入库单号"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="StockInSubject"
            label="入库主题"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="StockInDate" label="入库日期" align="center">
            <template v-slot="slot">
              {{ slot.row.StockInDate.substr(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="ProductionOrderID"
            label="生产单号"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="StockInEmployee"
            label="入库员工"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="WarehouseName"
            label="入库仓库"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="Remarks"
            label="备注"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
        </el-table>

        <table>
          <tr>
            <td>
              <el-pagination
                v-model:current-page="page"
                v-model:page-size="size"
                :page-sizes="[10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                @size-change="HandleSize"
                @current-change="HandlePageIndex"
              />
            </td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { TabsPaneContext } from "element-plus";

const activeName = ref("first");
const outWareHouseList = ref([]);
const quantity = ref(0);
const unitPrice = ref(0);
const totalAmount = ref(0); // 总金额
const totalCount = ref(0); // 总数量
const pageIndex = ref(1);
const pageSize = ref(10);
const page = ref(1);
const size = ref(10);
const stockInList = ref([]);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const router = useRouter();
const route = useRoute();
// const ProduceList = ref(null);
const ProduceList = ref({
  ProCode: "",
  ProDate: "",
  ProPeo: "",
  ProPhone: "",
  ProPeople: "",
  ProDesc: "",
  ProDateInfo: "",
});

const formInline = reactive({
  OutTopic: "",
  OutId: "", //OutId
  productionOrderID: "",
  stockInSubject: "",
});
const GetProduceInfo = () => {
  const ProId = route.query.ProId;
  axios.get(`Produce/GetProduceByProId?ProId=${ProId}`).then((res) => {
    ProduceList.value = res.data;
  });
};
const HandleSize = (val: number) => {
  size.value = val;
  getStockInList();
};
const handleSizeChange = (val: number) => {
  console.log("Page Size Changed to: ", val);
  pageSize.value = val;
  getOutWareHouseList();
};

const HandlePageIndex = (val: number) => {
  page.value = val;
  getStockInList();
};

const handleCurrentChange = (val: number) => {
  console.log("CurrentChange: ", val);
  pageIndex.value = val;
  getOutWareHouseList();
};

const getOutWareHouseList = () =>
  axios
    .get("OutWareHouse/GetOutWare", {
      params: {
        pageSize: pageSize.value,
        pageIndex: pageIndex.value,
        outTopic: formInline.OutTopic,
      },
    })
    .then((res) => {
      outWareHouseList.value = res.data.Data;
      quantity.value = res.data.Data.OutCount;
      unitPrice.value = res.data.Data.MatPrice;
      totalAmount.value = quantity.value * unitPrice.value;
      totalCount.value = res.data.TotalCount;
    });

const getStockInList = () => {
  axios
    .get("Storage/GetStockInPage", {
      params: {
        productionOrderID: formInline.productionOrderID,
        stockInSubject: formInline.stockInSubject,
        page: page.value,
        size: size.value,
      },
    })
    .then((res) => {
      stockInList.value = res.data.Data;
      totalCount.value = res.data.TotalCount;
    });
};
onMounted(() => {
  GetProduceInfo();
  getOutWareHouseList();
  getStockInList();
});
</script>
<style>
.container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Arial", sans-serif;
}

.description {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

.status,
.button {
  color: #333;
  font-size: 14px;
}

.button-text {
  font-size: 12px;
}

.links {
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 20px;
}

.basic-info {
  border: 1px solid #ccc;
  padding: 10px;
}

.label {
  font-weight: bold;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>